import React from 'react'
import Control from 'components/control'
import { Button, Input, message } from 'antd'

export default {
  key: 'control',
  name: 'Control 控制',
  author: '张然',
  description: '控制内部组件属性的组件，可以更改包裹组件的所有属性。',
  isExampleFull: false,
  api: [
    {
      title: 'Control包裹内的所有控件都可添加下列参数。',
      data: [{
        param: 'data-control',
        description: `当只需要一个页面控制时，可以为::string::或::object::。
        如果为::string::则为页面::key::与需要设置为::true::的属性名组成，例如::component-lib.disabled::。
        如果需要隐藏，则设置属性为::hidden::，例如::component-lib.hidden::。
        如果为::object::，则为一个对象::{key, props}::，::key::为页面key，::props::为给标签增加的属性对象。
        如果为::array::，则为多个页面公用的组件需要在多个页面设置权限，每一项与上述相同。
        `,
        type: 'string|object|array', defaultValue: '-'
      }],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '用::Control::包裹并打上标记，利用页面的::key::和对应::action::组成对应的标签，当新权限设置为::R::时生效。',
      state: {},
      getMethod: context => {
        return {}
      },
      getContent: context => {
        return (
          <Control>
            <Button data-control="component-lib.hidden">消失的按钮</Button>
            <Button data-control="component-lib.disabled">受控的按钮</Button>
            <a data-control="component-lib.disabled">受控的a标签</a>
            <Input data-control="component-lib.disabled" placeholder='受控的表单组件'/>
            <Button
              data-control={{
                key: 'component-lib',
                props: {
                  children: '被注入的children',
                  type: 'danger',
                  onClick: () => message.error('被注入的方法')
                }
              }}
            >
              原始按钮
            </Button>
            <Button
              data-control={[{
                key: 'component-lib',
                props: {
                  children: '数组的情况',
                  type: 'danger',
                  onClick: () => message.error('被注入的方法')
                }
              }, "dashboard.disabled"]}
            >
              原始按钮
            </Button>
          </Control>
        )
      }
    }
  ]
}
